<template>
  <div id="paymentLayout" :class="['payment-layout-wrapper']">
    <div class="container">
      <div class="payment-layout-content">
        <div class="top">
          <div class="header">
            <img src="@/assets/logo-alipay.svg" class="logo" alt="支付宝" />
            <h1>支付宝聚合支付</h1>
          </div>
          <div class="desc">
            <span>商户：{{ merchantName }}</span>
          </div>
        </div>

        <div class="main">
          <a-form
            ref="formPayment"
            class="payment-form"
            model="formState"
            @submit="handleSubmit"
          >
            <!-- 支付金额输入 -->
            <a-form-item name="amount">
              <a-input
                v-model:value="formState.amount"
                size="large"
                type="number"
                placeholder="请输入支付金额"
                step="0.01"
                min="0.01"
                @input="formatAmount"
              >
                <template #prefix>
                  <span class="amount-prefix">¥</span>
                </template>
              </a-input>
            </a-form-item>

            <!-- 提交按钮 -->
            <a-form-item class="submit">
              <a-button
                size="large"
                type="primary"
                html-type="submit"
                class="payment-button"
                :loading="submitBtnLoading"
                :disabled="!formState.amount || parseFloat(formState.amount) <= 0"
              >
                立即支付
              </a-button>
            </a-form-item>
          </a-form>
        </div>

        <div class="footer">
          <div class="copyright">
            © {{ currentYear }} 支付宝聚合支付平台
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { createPayment } from '@/api/payment'

const router = useRouter()

// 商户名称
const merchantName = '杭州某某科技有限公司'

// 当前年份
const currentYear = new Date().getFullYear()

// 表单引用
const formPayment = ref()

// 表单数据
const formState = reactive({
  amount: '',
})

// 提交按钮加载状态
const submitBtnLoading = ref(false)

// 格式化金额输入
function formatAmount() {
  // 保留两位小数
  if (formState.amount) {
    const num = parseFloat(formState.amount)
    if (!isNaN(num)) {
      formState.amount = num.toFixed(2)
    }
  }
}

// 处理支付提交
function handleSubmit() {
  const paymentParams = {
    amount: parseFloat(formState.amount),
    merchantName: merchantName,
  }

  submitBtnLoading.value = true

  // 调用支付接口
  createPayment(paymentParams)
    .then((response) => {
      // 支付成功，跳转到支付结果页
      router.push({ 
        path: '/payment/result', 
        query: { 
          orderId: response.orderId,
          amount: paymentParams.amount 
        } 
      })
    })
    .catch((err) => {
      // 显示错误信息（可添加通知组件）
      console.error('支付失败:', err)
    })
    .finally(() => {
      submitBtnLoading.value = false
    })
}

onMounted(() => {
  // 可以在这里初始化一些数据或验证商户信息
})
</script>

<style lang="less" scoped>
#paymentLayout.payment-layout-wrapper {
  height: 100%;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding: 20px;

    .payment-layout-content {
      width: 100%;
      max-width: 400px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      overflow: hidden;
      animation: slideUp 0.5s ease-out;

      .top {
        padding: 32px 32px 24px;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;

        .header {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 16px;

          .logo {
            height: 48px;
            margin-bottom: 12px;
          }

          h1 {
            margin: 0;
            font-size: 20px;
            color: #1890ff;
            font-weight: 600;
          }
        }

        .desc {
          font-size: 14px;
          color: #666;
          span {
            font-weight: 500;
            color: #333;
          }
        }
      }

      .main {
        padding: 24px 32px;
      }

      .footer {
        padding: 16px;
        text-align: center;

        .copyright {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.payment-form {
  :deep(.ant-input) {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    
    &:focus {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }

  .amount-prefix {
    font-size: 18px;
    color: #333;
    margin-right: 8px;
  }

  .submit {
    margin-top: 32px;
    
    .payment-button {
      height: 56px;
      font-size: 18px;
      border-radius: 8px;
      background: #1890ff;
      border-color: #1890ff;
      
      &:hover {
        background: #40a9ff;
        border-color: #40a9ff;
      }
      
      &:disabled {
        background: #f5f5f5;
        border-color: #d9d9d9;
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }
}
</style>